import React ,{Component} from 'react';
import ReactDOM from 'react-dom';

class Computer extends Component{
  constructor(props){
    super(props);
    this.state={
      status:false,
      showContent:"显示器关了"
    };
  }
  handleClick(){
    this.setState({
      status:!this.state.status
    });
  }
  render(){
    return (
      <div>
        <button onClick={this.handleClick.bind(this)}>{this.state.status ? 'ON':'OFF'}</button>
        <Screen showContent={this.state.status ? '显示器亮了':'显示器关了'}/>
      </div>
    )
  }
}
const users = [
  { username: 'Jerry', age: 21, gender: 'male' },
  { username: 'Tomy', age: 22, gender: 'male' },
  { username: 'Lily', age: 19, gender: 'female' },
  { username: 'Lucy', age: 20, gender: 'female' }
]
class UsersList extends Component{
  render(){
    return(
      <div>
        <span>用户名：{this.props.user.username}</span>
        <span>年龄：{this.props.user.age}岁</span>
        <span>性别：{this.props.user.gender=="male" ? "男":"女"}</span>
      </div>
    )
  }
}
class UserInfo extends Component{
  render(){
    return(
      <div>
        {
          users.map((user,key)=>{
              return (<UsersList key={key} user={user}/>)
          })
        }
      </div>
    )
  }
}
class Screen extends Component{
  render(){
    return (
      <div>{this.props.showContent}</div>
    )
  }
}

ReactDOM.render(<UserInfo />,document.getElementById("root"))
